<template>
  <div class="friendBox">
    <template v-if="isLogin">
      <div class="friendBoxLeft">
        <p class="u-title">动态</p>
        <Dynamic />
      </div>
      <div class="friendBoxRight">
        <RightLogin />
        <Anchor />
      </div>
    </template>
    <NoLogin v-else />
  </div>
</template>



<script>
import RightLogin from "@/views/DiscoverMusic/rightLogin.vue";
import Dynamic from "@/views/Friend/dynamic.vue";
import NoLogin from "@/views/Friend/noLogin.vue";
import Anchor from "@/components/Anchor";
import { mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  components: {
    RightLogin,
    Dynamic,
    Anchor,
    NoLogin,
  },
  computed: {
    ...mapGetters("loginStore", ["isLogin"]),
  },
};
</script>


<style lang="scss" scoped>
.friendBox {
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
  display: flex;
  .friendBoxLeft {
    border-right: 1px solid #d3d3d3;
    box-sizing: content-box;
    padding: 20px 30px;
    overflow: hidden;
    flex: 1;
  }
  .friendBoxRight {
    width: 296px;
    height: 890px;
    box-sizing: border-box;
    overflow: auto;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    &::-webkit-scrollbar {
      width: 0 !important;
    }
  }
}
</style>